<template>
  <div class="markdown-content">
    <v-md-preview :text="content" 
    :include-level="[1, 2, 3, 4, 5, 6]"
     @copy-code-success="handleCopyCodeSuccess"/>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { defineProps } from 'vue';

const props = defineProps({
  content: {
    type: String,
    default: ''
  }
});
const handleCopyCodeSuccess = ()=>{
  ElMessage.success('复制成功');
}
</script>

<style scoped>
.markdown-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  overflow: auto;
}

:deep(.github-markdown-body) {
  background-color: transparent !important;
  padding: 0 !important;
}

:deep(.v-md-editor-preview) {
  background-color: transparent !important;
  padding: 0 !important;
}

:deep(.v-md-editor-preview-wrapper) {
  box-shadow: none !important;
  border: none !important;
}
</style>
